import { useState, useEffect } from "react";
import "./index.less";
import { Input, message } from "antd";
import { request } from "../../../../../common/request";
import { urls } from "../../../../../common/urls";
import UploadImg from "../../../../../components/UploadImg";

function Authentication({profileList}: any) {
  const [isApplying, setIsApply] = useState(false);
  const [isReject, setIsReject] = useState(true);

  const [name, setName] = useState('');
  const [idCard, setIdCard] = useState('');
  const [cardStraight, setCardStraight] = useState('');
  const [cardReverse, setCardReverse] = useState('');

  const replaySubmit = () => {
    setIsApply(false);
  };

  const handleSetName = (e: any) => {
    setName(e.target.value)
  }

  const handleSetIdCard = (e: any) => {
    setIdCard(e.target.value)
  }

  const handleSetCardStraight = (e: any) => {
    setCardStraight(e)
  }

  const handleSetCardReverse = (e: any) => {
    setCardReverse(e)
  }

  const submitAuthentication = () => {
    request({
      method: "post",
      data: {
        method: urls.submitAuthentication,
        name: name,
        id_card: idCard,
        card_straight: cardStraight,
        card_reverse: cardReverse
      },
    }).then((res: any) => {
      message.success(res.msg);
    }).catch((err) => {
      message.error(err);
    });
  };

  useEffect(() => {
    switch(profileList.status_auth) {
      case 0: {
        setIsApply(true);
        setIsReject(false);
        break;
      }
      case 1: {
        break;
      }
      case -1: {
        setIsApply(true);
        setIsReject(true);
        break;
      }
      case 2: {
        setIsApply(false);
        setIsReject(false);
        break;
      }
    }
  }, [profileList]);

  return (
    <>
      {
        isApplying ?
          <div className="apply-page text-style">
            <img className="apply-page-icon"
              src={ 
                isReject ?
                  '/src/assets/icon/smrz_bohui@2x.png' :
                  '/src/assets/icon/smrz_shenhe@2x.png'
             } 
             alt="" 
            />
            <div className="apply-page-text">{ isReject ? '已驳回' : '审核中' }</div>
            <div className="apply-page-tips">
              { 
                isReject ?
                  '您的信息已驳回，请重新提交' :
                  '您的信息已提交，请耐心等待审核'
              }
            </div>
            {
              isReject ?
                <>
                  <div className="apply-page-reason">
                    原因：身份证照片不清晰，请重新上传
                  </div>
                  <div className="apply-page-reBtn" onClick={ replaySubmit }>重新提交</div>
                </>:
                null
            }
          </div> :
          <div className="authentication-page text-style">
            <div className="authentication-item">
              <div className="authentication-item-title">真实姓名</div>
              <Input
                className="authentication-item-input"
                placeholder="请输入真实姓名"
                value={ name }
                onChange={ handleSetName }
              />
            </div>
            <div className="authentication-item">
              <div className="authentication-item-title">身份证号</div>
              <Input
                className="authentication-item-input"
                placeholder="请输入身份证号"
                count={{
                  show: false,
                  max: 18,
                  exceedFormatter: (txt, { max }) => txt.slice(0, max)
                }}
                value={ idCard }
                onChange={ handleSetIdCard }
              />
            </div>
            <div className="authentication-pic">
              <div className="authentication-pic-item">
                <UploadImg
                  groupImg="../../../../../assets/icon/sfz_up@2x.png"
                  className="authentication-pic-img"
                  getAvatar={ handleSetCardStraight }
                />
                <div className="authentication-pic-des">身份证人像正面</div>
              </div>
              <div className="authentication-pic-item">
                <UploadImg 
                  groupImg="../../../../../assets/icon/sfz_down@2x.png"
                  className="authentication-pic-img"
                  getAvatar={ handleSetCardReverse }
                />
                <div className="authentication-pic-des">身份证国徽面</div>
              </div>
            </div>
            <div className="authentication-btn" onClick={ submitAuthentication }>提交审核</div>
          </div>
      }
    </>
  );
}

export default Authentication;
